<template>
    <div class="product-container">
      <div class="product-title">{{dataDesc.message}}</div>
      <div class="product-wrapper clearfix">
        <!--图片展示-->
        <div class="image-container">
          <a class="cover" :style="{backgroundImage:'url('+cover+')'}"></a>
          <div class="other-images">
            <div class="btn-prev"></div>
            <div class="image-item-container">
              <div v-for="(item,index) of dataDesc.imageList" :key="index" class="image-item" @mouseenter="changeCover($event)" :style="{backgroundImage:'url('+item+')'}"></div>
            </div>
            <div class="btn-next"></div>
          </div>
        </div>
        <!--具体详情-->
        <div class="product-content">
          <div class="user-info">
            <span class="">联&nbsp;&nbsp;系&nbsp;人：<strong>{{dataDesc.name}}</strong></span>
          </div>
          <div class="quantity">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：<span>100</span><i class="unit">斤</i></div>
          <div class="price">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<span>100</span><i class="unit">元/斤</i></div>
          <div class="phone">联系电话：<span>{{dataDesc.phone}}</span></div>
          <div class="address">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：<em>{{dataDesc.address}}</em></div>
          <div class="desc">详&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情： {{dataDesc.descInfo}}</div>
          <div class="time">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间： {{dataDesc.createTime}}</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'ProductDesc',
  props: ['dataDesc'],
  data () {
    return {
      id: this.$route.query.id,
      result: '',
      cover: ''
    }
  },
  mounted () {
    setTimeout(this.init, 500)
    // this.init()
  },
  methods: {
    /**
     * 初始化，小图片偏移位置
     */
    init: function () {
      // 设置封面
      this.cover = this.dataDesc.imageList[0]
      // 添加鼠标事件动作
      let el = this.$el
      let imageItemContainer = el.getElementsByClassName('image-item-container')[0]
      let children = imageItemContainer.children
      for (let i = 0; i < children.length; i++) {
        children[i].style.left = (i * 70) + 'px'
      }
    },
    /**
     * 点击切换详情图片
     * @param ev
     */
    changeCover: function (ev) {
      ev = ev || event
      let target = ev.currentTarget || ev.srcElement
      let el = this.$el
      let cover = el.getElementsByClassName('cover')[0]
      cover.style.backgroundImage = target.style.backgroundImage
    }
  }
}
</script>

<style lang="stylus" scoped>
.product-container
  width 80%
  min-width 800px
  min-height 500px
  background-color #f8f8f8
  border:1px solid #e6e6e6
  padding:10px
  .product-title
    line-height: 40px;
    padding: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    text-align center
  .product-wrapper
    background-color #FAFAFA
    .image-container
      float left
      .cover
        display block
        width 330px
        height 300px
        border:1px solid #CCC
        cursor pointer
        background-size:100% 100%
        background-position:left top
        background-repeat no-repeat
     .other-images
       display flex
       .btn-prev,.btn-next
         width 20px
         height 50px
         margin:10px 0
         border:1px solid #CCCCCC
         cursor pointer
         background-repeat no-repeat
         background-size 15px 20px
         background-position center center
       .btn-prev
         background-image url("icon/icon-left-narrow.png")
         &:hover
           border:1px solid #d81e06
           background-image url("icon/icon-left-active.png")
       .btn-next
         background-image url("icon/icon-right-narrow.png")
         &:hover
           border:1px solid #d81e06
           background-image url("icon/icon-right-active.png")
       .image-item-container
         position relative
         width 290px
         overflow hidden
         .image-item
           position absolute
           width 50px
           height:50px
           border:1px solid #CCCCCC;
           padding:5px
           cursor pointer
           background-size:50px 50px
           background-position:center center
           background-repeat no-repeat
           margin:5px
           overflow hidden
           &:hover
             border:1px solid brown;
         .active
           border:1px solid brown;
    .product-content
       float:right
       min-width 300px
       width calc(100% - 340px)
       background-color #F5F5F5
       .user-info,.price,.phone,.quantity,.address,.desc,.time
         font-size 16px
         line-height 30px
         color #333
         em,i,strong
           font-style normal
         span
          color #333
          strong
            font-style normal
         p
          width 100%
          word-break break-all
         .unit
           color: #d81e06
           margin-left 10px
</style>
